Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Breadcrumbs
Quasar comes with the q-breadcrumbs component to let us add breadcrumbs.
To use it, we write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-breadcrumbs>
<q-breadcrumbs-el label="Home"></q-breadcrumbs-el>
<q-breadcrumbs-el label="Components"></q-breadcrumbs-el>
<q-breadcrumbs-el label="Breadcrumbs"></q-breadcrumbs-el>
</q-breadcrumbs>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the q-breadcrumbs components as the container.
And we add the breadcrumb entries with the q-breadecrumbs-el component.
The label is the text we display.
We can add icons with the icon prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-breadcrumbs>
<q-breadcrumbs-el label="Home"></q-breadcrumbs-el>
<q-breadcrumbs-el
label="Components"
icon="widgets"
></q-breadcrumbs-el>
<q-breadcrumbs-el label="Breadcrumbs"></q-breadcrumbs-el>
</q-breadcrumbs>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We can also add it inside a q-toolbar :
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-toolbar>
<q-btn flat round dense icon="assignment_ind" />
<q-toolbar-title>Quasar</q-toolbar-title>
<q-btn flat round dense icon="sim_card" class="q-mr-xs" />
<q-btn flat round dense icon="gamepad" />
</q-toolbar>
<q-toolbar inset>
<q-breadcrumbs>
<q-breadcrumbs-el label="Home"></q-breadcrumbs-el>
<q-breadcrumbs-el
label="Components"
icon="widgets"
></q-breadcrumbs-el>
<q-breadcrumbs-el
label="Breadcrumbs"
></q-breadcrumbs-el> </q-breadcrumbs
></q-toolbar>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the q-toolbar component with the q-breadcrumbs component inside.
The inset makes the breadcrumb component align inside the toolbar.
Button
We can add buttons into our Vue app with the q-btn component.
For example, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-btn color="white" text-color="black" label="Standard"></q-btn>
<q-btn color="primary" label="Primary"></q-btn>
<q-btn color="secondary" label="Secondary"></q-btn>
<q-btn color="amber" glossy label="Amber"></q-btn>
<q-btn color="brown-5" label="Brown 5"></q-btn>
<q-btn color="deep-orange" glossy label="Deep Orange"></q-btn>
<q-btn color="purple" label="Purple"></q-btn>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the q-btn components to add the buttons.
color sets the background color.
label sets the button text.
glossy makes the button glossy.
Conclusion
We can add breadcrumbs and buttons into our Vue app with Quasar.
